<script setup lang="ts">

import { useRouter } from "vue-router";


let router = useRouter()
const props = defineProps(['name', 'desc', 'time1', 'time2', 'img', 'id'])
const time1 = new Date(props.time1);

// 提取日期部分
const date1 = time1.toISOString().split("T")[0];
const time2 = new Date(props.time1);

// 提取日期部分
const date2 = time2.toISOString().split("T")[0];

const goDetail = (id: number) => {
    router.push({ path: 'coursedetail', query: { corId: id } })
}
</script>

<template>
    <div class="card" @click="goDetail(Number(id))">
        <el-card shadow="hover">
            <template #footer>
                <p class="name">{{ name }}</p>
                <p class="desc">简介：{{ desc }}</p>
                <p class="time">上课时间:{{ date1 }}~{{ date2 }}</p>
            </template>
            <img :src="img" style="width: 220px;height: 135px; object-fit: cover;  transform: translateX(-12px);" />
        </el-card>
    </div>
</template>

<style scoped>
.card {
    width: 270px;
    height: 270px;
    border: 1px solid #eee;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .16);
    border-radius: 15px;
    margin: 10px 13px;
    overflow: hidden;
    font-family: Segoe UI;

    .name {
        font-size: 18px;
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出内容 */
        text-overflow: ellipsis;
        /* 显示省略号 */
        letter-spacing: 2px;
        /* 字间距 */
        margin-top: -20px;
    }

    .desc {
        font-size: 12px;
    }

}
</style>
